<template>
  <!-- 分销返点设置 -->
  <div class="app-container">
    <h3 class="title">分销返点设置</h3>
    <el-button class="addBtn" type="primary" @click="add">新增分销返点</el-button>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="加载中请稍后"
      border
      fit
      highlight-current-row>
      <el-table-column label="返点">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.usableStatus === 0">停用</span>
          <span v-else-if="scope.row.usableStatus === 1">启用</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" width="240">
        <template slot-scope="scope">
          <el-button
            :disabled="scope.row.usableStatus === 1"
            size="mini"
            type="primary"
            @click="edit(scope.row, scope.$index)">编辑</el-button>
          <el-button
            v-if="scope.row.usableStatus === 0"
            size="mini"
            type="success"
            @click="update(scope.row.id, 1)">启用</el-button>
          <el-button
            v-if="scope.row.usableStatus === 1"
            size="mini"
            type="danger"
            @click="update(scope.row.id, 0)">停用</el-button>
          <el-button
            :disabled="scope.row.usableStatus === 1"
            size="mini"
            type="danger"
            @click="update(scope.row.id, -1)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
    <Settings
      :settings-visible.sync="dialogTableVisible"
      :dialog-data.sync="rowData"
      :my-index.sync="detailIndex"
      :setting-mode="'rebate'"
      @updataParent="submitFn"/>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'

import { Message } from 'element-ui'
import { getLocalUid, setLocalUid, getLocalId, setLocalId } from '@/utils/uid'
import { getPermission } from '@/api/permission'
import { getLocalUserName, setLocalUserName } from '@/utils/uid'
import { getAddressList, addressUpdate } from '@/api/address'

import { getGoodsType, addGoodsType, updateGoodsType } from '@/api/settings'
import Settings from '@/components/Settings'

export default {
  components: { Pagination, Settings },
  filters: {
    nullStr(str) {
      if (str === '' || str === null) {
        return '-'
      } else {
        return str
      }
    }
  },
  data() {
    return {
      userType: -1,
      list: [],
      rowData: {},
      total: 0,
      listLoading: true,
      listQuery: {
        pageNum: 0,
        pageSize: 10
      },
      search: {
        orderNumbers: '',
        vipId: '',
        name: '',
        phone: '',
        startTime: '',
        endTime: ''
      },
      dialogTableVisible: false,
      detailIndex: -1,
      permissionShow: false // 权限数据未到达之前按钮隐藏
      // permissionList: [] // 权限数据列表
    }
  },
  computed: {
    // permissionBoolean() {
    //   return function(str) {
    //     const arr = []
    //     for (let i = 0; i < this.permissionList.length; i++) {
    //       arr.push(this.permissionList[i].name)
    //     }
    //     const index = arr.indexOf(str)

    //     if (index !== -1) {
    //       return true
    //     } else {
    //       return false
    //     }
    //   }
    // }
  },
  watch: {
    'permissionList'(newVal) {
      this.permissionList = newVal
      this.permissionShow = true
    }
  },
  created() {
    this.getUserType()
    this.fetchData()
    // this.getPermissonFn()
  },
  methods: {
    // 权限数据的获取
    // getPermissonFn() {
    //   const id = getLocalId()
    //   const uid = getLocalUid()
    //   const data = { uid }
    //   getPermission(id, data).then(res => {
    //     console.log('权限结果', res)
    //     if (res.code === '200') {
    //       this.permissionList = res.data
    //       // console.log('权限名称：', this.getPermissionName(this.permissionList))
    //     } else {
    //       Message.error(res.message + '-' + res.data)
    //     }
    //   })
    // },
    submitFn(data) {
      // console.log(data)
      this.detailIndex === -1 ? addGoodsType(data).then(res => {
        if (res.code === '200') {
          Message.success('新增成功')
          this.fetchData();
        } else {
          Message.error(res.message + '-' + res.data)
        }
      }) : updateGoodsType(data).then(res => {
        if (res.code === '200') {
          Message.success('编辑成功')
          this.fetchData();
        } else {
          Message.error(res.message + '-' + res.data)
        }
      })
    },
    add() {
      this.detailIndex = -1
      this.dialogTableVisible = true
    },
    getUserType() {
      switch (getLocalUserName()) {
        case 'admin':
          this.userType = 1
          break;
        case 'sale':
          this.userType = 2
          break;
        case 'casher':
          this.userType = 3
          break;
      }
    },
    fetchData() {
      this.listLoading = true
      const newData = this.objectCon(this.listQuery)
      console.log('newData:=>', newData)
      getGoodsType(newData).then(response => {
        if (response.code === '200') {
          this.list = response.data.list
          console.log('订单数据：', this.list)
          this.total = response.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 0.5 * 1000)
        } else {
          this.listLoading = false
        }
      })
    },
    see(index) {
      this.dialogTableVisible = true
      this.detailIndex = index
    },
    edit(row, index) {
      console.log(row, index)
      this.detailIndex = index
      this.rowData = row
      this.dialogTableVisible = true
    },
    update(id, type) {
      if (type === -1) { // 删除
        this.$confirm('是否删除该分销返点？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(res => {
          const data = { status: 0, id }
          updateGoodsType(data).then(res => {
            if (res.code === '200') {
              Message.success('已删除')
              this.fetchData()
            } else {
              Message.error(res.message + res.data)
            }
          })
        })
      } else { // 编辑
        const strAsk = type === 0 ? '是否停用该分销返点？' : '是否启用该分销返点？'
        const str = type === 0 ? '已停用' : '已启用'
        this.$confirm(strAsk, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(res => {
          const data = { usableStatus: type, id }
          updateGoodsType(data).then(res => {
            if (res.code === '200') {
              Message.success(str)
              this.fetchData()
            } else {
              Message.error(res.message + res.data)
            }
          })
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .inputBox{
    div{ margin-bottom: 10px;}
  }

  .addBtn{
      margin-bottom: 20px;
  }
</style>
